<template>
  <div class="home">

    <el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录" name="first">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="电话号码" prop="tel">
            <el-input :maxlength="11" type="text" v-model="ruleForm.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="checkPass">
            <el-input :maxlength="8" show-password type="password" v-model="ruleForm.checkPass" autocomplete="off">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="注册" name="second">
        <el-form :model="ruleFormRegister" :rules="rulesRegister" ref="ruleFormRegister" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="名字" prop="name">
            <el-input :maxlength="6" v-model="ruleFormRegister.name"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input :maxlength="11" v-model="ruleFormRegister.tel"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input :maxlength="8" show-password type="password" v-model="ruleFormRegister.pass"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="ruleFormRegister.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitFormRegister('ruleFormRegister')">立即注册</el-button>
            <el-button @click="resetFormRegister('ruleFormRegister')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  data() {
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!this.isCellPhone(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    };
    let checkpassword = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,10}$/;
      if (!reg.test(value)) {
        callback(new Error('密码必须是由4-20位字母+数字组合'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      ruleForm: {
        tel: '',
        checkPass: '',
      },
      //登录
      rules: {
        tel: [
          { required: true, trigger: 'blur' },
          { validator: checkphone, trigger: 'blur' }
        ],
        checkPass: [
          { vrequired: true, trigger: 'blur' },
          { validator: checkpassword, trigger: 'blur' }

        ]
      },
      //注册
      ruleFormRegister: {
        name: '',
        tel: '',
        pass: '',
        gender: ''
      },

      rulesRegister: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' },
        ],
        tel: [
          { required: true, message: '请输入号码', trigger: 'blur' },
          { validator: checkphone, trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkpassword, trigger: 'blur' }

        ]
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$api.login({
            tel: this.ruleForm.tel,
            passWord: this.ruleForm.checkPass
          }).then(res => {
            if (res.code === 200) {
              // console.log(res.data.id)
              localStorage.clear();
              localStorage.setItem("satoken", res.data.saToken);
              localStorage.setItem("userid", res.data.id);
              localStorage.setItem("userName", res.data.userName)
              // console.log(localStorage.getItem("satoken"));
              this.$router.push("/index")
            } else if (res.code === 201) {
              this.$message({
                message: '账号不存在',
                type: 'error'
              });
            } else if (res.code === 202) {
              this.$message({
                message: '密码错误',
                type: 'error'
              });
            }


          });

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //注册
    submitFormRegister(formName) {
      if (this.ruleFormRegister.gender === '男') {
        this.ruleFormRegister.gender = 1;

      } else if (this.ruleFormRegister.gender === '女') {
        this.ruleFormRegister.gender = 2;
      } else {
        this.ruleFormRegister.gender = 0;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.register({
            tel: this.ruleFormRegister.tel,
            userName: this.ruleFormRegister.name,
            passWord: this.ruleFormRegister.pass,
            gender: this.ruleFormRegister.gender
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                message: '电话号码重复',
                type: 'error',
                duration: 300
              });
              return;
            }
            location.reload()
            this.$message({
              message: '恭喜你，注册成功',
              type: 'success',
              duration: 300
            });

          });

        } else {
          return false;
        }
      });
    },
    resetFormRegister(formName) {
      this.$refs[formName].resetFields();
    },
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  width: 500px;
  height: 800px;
  margin: auto;
}
</style>
